<script>
  export default {
    name: 'FontSizeOption',
    emits: ['select'],
    props: {
      options: {
        type: Array,
        default: ['12px','14px', '16px', '18px', '20px', '24px', '28px', '32px', '36px', '48px', '56px', '72px']
      },
      modelValue: {
        type: String,
        default: '12px'
      }
    },
    watch: {
      modelValue: {
        handler (val) {
          this.value = val
        },
        immediate: true
      }
    },
    data () {
      return {
        visible: false,
        value: '12px'
      }
    },
    methods: {
      handleSelect () {
        this.$emit('select', this.value)
        this.toggleVisible()
      },
      toggleVisible() {
        this.visible = !this.visible
      }
    }
  }
</script>

<template>
  <div class="tx-select" title="字号">
    <select @change="handleSelect" v-model="value">
      <option v-for="o in options" :key="o" :value="o">{{ o }}</option>
    </select>
  </div>
</template>

<style scoped>
  .tx-select {
    display: inline-block;
  }
</style>